<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.global.js"></script>
    <style>
        .active-gender{
            background:red;
        }
    </style>
</head>
<div id = 'app'>
    <input type="text" v-model="message">
    <button :class="activeGender('全部')" @click="handleGender('全部')">全部</button>
    <button :class="activeGender('男')" @click="handleGender('男')">男</button>
    <button :class="activeGender('女')" @click="handleGender('女')">女</button>
    <ul>
        <li v-for="item,index in filterList">{{item.name}},{{item.gender}},{{item.age}}</li>
    </ul>
</div>
<body>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    list:[],
                    message:'',
                    gender:'全部'
                }
            },
            created() {
                fetch('./data.json')
                    .then((res)=>res.json())
                    .then((res)=>{
                        console.log(res)
                        this.list = res;
                    })
            },
            computed:{
                filterList(){
                    //初始化依据data属性过滤
                    return this.list.filter((v)=>v.name.includes(this.message))
                                    .filter((v)=>v.gender === this.gender || this.gender === '全部');

                }
            },
            methods:{
                activeGender(gender){
                    return {'active-gender': this.gender === gender}
                },
                //将值传给data属性继而过滤数据
                handleGender(gender){
                    this.gender = gender;
                }
            }
        });
        let vm = app.mount('#app');

    </script>
</body>
</html>